<!DOCTYPE html>
<html>
<head>
  <!-- 页面meta -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>工程项目管理</title>
  <meta name="description" content="工程项目管理">
  <meta name="keywords" content="工程项目管理">
  <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../js/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="../../plugins/font-awesome/css/font-awesome.min(1).css">
  <link rel="stylesheet" href="../../css/style.css">
</head>
<body class="hold-transition">
<div id="app">
  <div class="content-header">
    <h1>工程项目管理</h1>
    <!--  <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>预约管理</el-breadcrumb-item>
          <el-breadcrumb-item>检查项管理</el-breadcrumb-item>
      </el-breadcrumb>-->
  </div>
  <div class="app-container">
    <div class="box">
      <div class="filter-container">
        <!-- <el-input placeholder="项目编码/项目名称" v-model="pagination.queryString" style="width: 200px;" class="filter-item"></el-input>-->
        <!--  <el-button @click="findPage()" class="dalfBut">查询</el-button>-->
        <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
      </div>
      <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
        <el-table-column type="index" align="center" label="序号"></el-table-column>
        <el-table-column prop="did" label="开发商ID" align="center"></el-table-column>
        <el-table-column prop="dname" label="开发商名称" align="center"></el-table-column>
        <el-table-column prop="updatetime" label="项目创建时间" align="center"></el-table-column>
          <!--
                                <template slot-scope="scope">
                                        <span>{{ scope.row.sex == '0' ? '不限' : scope.row.sex == '1' ? '男' : '女'}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="age" label="适用年龄" align="center"></el-table-column>
                                <el-table-column prop="remark" label="项目说明" align="center"></el-table-column>-->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <!--分页插件-->
        <el-pagination
                background
                class="pagiantion"
                @current-change="handleCurrentChange"
                :current-page="pagination.currentPage"
                :page-size="pagination.pageSize"
                layout="total, prev, pager, next, jumper"
                :total="pagination.total">
        </el-pagination>
      </div>
      <!-- 新增标签弹层 -->
      <div class="add-form">
        <!-- //新增页面默认是false不展示 -->
        <el-dialog title="新增项目工程" :visible.sync="dialogFormVisible">
          <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
            <!--一行-->
            <el-row>
              <el-col :span="24">
                <el-form-item label="开发商ID" prop="did">
                  <el-input v-model="formData.did"/>
                </el-form-item>
              </el-col>
            </el-row>
            <!--一行-->
            <el-row>
              <el-col :span="24">
                <el-form-item label="开发商名称" prop="dname">
                  <el-input v-model="formData.dname"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="结束时间" prop="updatetime">
                  <el-date-picker
                          v-model="formData.updatetime"
                          type="date"
                          placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>



          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="handleAdd()">确定</el-button>
          </div>
        </el-dialog>
      </div>

      <!-- 编辑标签弹层 -->
      <div class="add-form">
        <el-dialog title="编辑工程" :visible.sync="dialogFormVisible4Edit">
          <el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
            <el-row>
              <el-col :span="24">
                <el-form-item label="开发商ID" prop="did">
                  <el-input v-model="formData.did"/>
                </el-form-item>
              </el-col>
            </el-row>
            <!--一行-->
            <el-row>
              <el-col :span="24">
                <el-form-item label="开发商名称" prop="dname">
                  <el-input v-model="formData.dname"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="创建时间" prop="updatetime">
                  <el-date-picker
                          v-model="formData.updatetime"
                          type="date"
                          placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible4Edit = false">取消</el-button>
            <el-button type="primary" @click="handleEdit()">确定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../../js/vue.js"></script>
<script src="../../js/lib/index.js"></script>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script src="../../js/axios-0.18.0.js"></script>
<script>
  var vue = new Vue({
    el: '#app', //绑定页面元素
    data:{
      //分页对象
      pagination: {//分页相关模型数据
        currentPage: 1,//当前页码
        pageSize:10,//每页显示的记录数
        total:0,//总记录数
        queryString:null//查询条件
      },
      dataList: [],//当前页要展示的分页列表数据
      formData: {},//表单数据
      dialogFormVisible: false,//增加表单是否可见
      dialogFormVisible4Edit:false,//编辑表单是否可见
      rules: {//校验规则
        pname: [{ required: true, message: '项目编码为必填项', trigger: 'blur' }],
        starttime: [{ required: true, message: '开始时间为必填项', trigger: 'blur' }],
        endtime: [{ required: true, message: '结束时间为必填项', trigger: 'blur' }]
      }
    },
    //钩子函数，VUE对象初始化完成后自动执行
    created() {
      this.findPage();//VUE对象初始化完成后调用分页查询方法，完成分页查询
    },
    methods: {
      //编辑
      handleEdit() {
        //进行表单校验
        this.$refs['dataEditForm'].validate((valid) => {
          if(valid){
            //表单校验通过，可以提交数据
            console.log(this.formData)
            axios.post("/developer/editDeveloper",this.formData).then((res) => {
              if(res.data.flag){
                //弹出成功提示信息
                this.$message({
                  type:'success',
                  message:res.data.message
                });
              }else{
                //执行失败
                this.$message.error(res.data.message);
              }
            }).finally(() => {
              //不管成功还是失败，都调用分页查询方法
              this.findPage();
              //隐藏编辑窗口
              this.dialogFormVisible4Edit = false;
            });
          }else{
            //表单校验不通过
            this.$message.error("表单数据校验失败!");
            return false;
          }
        });
      },
      //添加
      handleAdd () {
        //进行表单校验   validate
        this.$refs['dataAddForm'].validate((valid) => {
          if(valid){
            //表单校验通过，发生ajax请求，将录入的数据提交到后台进行处理
            console.log(this.formData);
            //添加接口：url、application/json,developer实体
            axios.post("/developer/addDeveloper",this.formData).then((res) => {
              //关闭新增窗口
              this.dialogFormVisible = false;
              if(res.data.flag){//执行成功
                //新增成功后，重新调用分页查询方法，查询出最新的数据
                this.findPage();
                //弹出提示信息
                this.$message({
                  message:res.data.message,
                  type:'success'
                });
              }else{//执行失败
                //弹出提示
                this.$message.error(res.data.message);
              }
            });
          }else{
            //校验不通过
            this.$message.error("数据校验失败，请检查你的输入信息是否正确！");
            return false;
          }
        });
      },
      //分页查询
      findPage() {
        //发送ajax请求，提交分页相关请求参数（页码、每页显示记录数、查询条件）
        var param = {
          currentPage:this.pagination.currentPage,
          pageSize:this.pagination.pageSize,
          queryString: this.pagination.queryString
        };
        //接口url、请求type,请求参数、响应数据
        axios.post("/developer/findPage",param).then((res)=>{
          //解析Controller响应回的数据，为模型数据赋值
          console.log(res.data.total);
          this.pagination.total = res.data.total;
          //给表格要遍历的数据赋值
          this.dataList = res.data.rows;
        });
      },
      // 重置表单
      resetForm() {
        this.formData = {};//重置数据
      },
      // 弹出添加窗口
      handleCreate() {
        //弹出新增窗口
        this.dialogFormVisible = true;
        this.resetForm();
      },
      // 弹出编辑窗口
      handleUpdate(row) {
        //弹出编辑窗口
        this.dialogFormVisible4Edit = true;
        //回显数据，发送ajax请求根据ID查询当前检查项数据
        axios.get("/developer/findDeveByDid?did=" + row.did).then((res) => {
          if(res.data.flag){
            //进行回显，基于VUE的数据绑定实现
            this.formData = res.data.data;
          }else{
            //查询失败，弹出提示
            this.$message.error(res.data.message);
          }
        });
      },
      //切换页码
      handleCurrentChange(currentPage) {
        //设置最新的页码
        this.pagination.currentPage = currentPage;
        //重新调用findPage方法进行分页查询
        this.findPage();
      },
      // 删除
      handleDelete(row) {//row其实是一个json对象，json对象的结构为{"age":"0-100","attention":"无","code":"0011","id":38,"name":"白细胞计数","price":10.0,"remark":"白细胞计数","sex":"0","type":"2"}
        //alert(row.id);
        this.$confirm("你确定要删除当前数据吗？","提示",{//确认框
          type:'warning'
        }).then(()=>{
          //用户点击确定按钮，发送ajax请求，将检查项ID提交到Controller进行处理
          axios.get("/developer/deleteByPid?pid=" + row.pid).then((res) => {
            if(res.data.flag){
              //执行成功
              //弹出成功提示信息
              this.$message({
                type:'success',
                message:res.data.message
              });
              //重新进行分页查询
              this.findPage();
            }else{
              //执行失败
              this.$message.error(res.data.message);
            }
          });
        }).catch(()=>{
          this.$message({
            type:'info',
            message:'操作已取消'
          });
        });
      }
    }
  })
</script>
</html>